<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
/*On g&eacute;ocode toutes les address et on les mets dans un tableau
expos chaque valeur de expo sera un tableau qui contient lat, long,
information sur l'expo*/
var expos = new Array();
function codeAddress(_address,name,information, link) {
	var geocoder = new google.maps.Geocoder();
  	var address = _address+" ,FR";//document.getElementById("address").value;

  	if (geocoder) {
    	geocoder.geocode( { 'address': address}, function(results, status) {
      	if (status == google.maps.GeocoderStatus.OK) {
			var lat = results[0].geometry.location.lat();
			var lng = results[0].geometry.location.lng();
			res = [ lat , lng, name,information,_address, link];
			expos.push(res);
			//alert(expos.join());
 	    	 }
		else {
        	alert("Geocode was not successful for the following reason: " + status);
      		}
  		});
 	}
}
</script>
<script>
/*L'utilisateur*/
<?php foreach($query_adress_usr->result() as $row){?>
<?php $adresse_concatenee_usr=$row->address." ".$row->place." ".$row->zip_code." ".$row->city;?>
codeAddress('<?php echo $adresse_concatenee_usr;?>','<?php echo $row->name;?>','<?php echo $row->firstname;?>',' ');		  
<?php } ?>
</script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["map","table"]});
google.setOnLoadCallback(drawMap);
function drawMap() {
        var data = new google.visualization.DataTable();
        data.addColumn('number', 'Lat');
        data.addColumn('number', 'Lon');
        data.addColumn('string', 'Name');
        data.addColumn('string', 'Description');
        data.addColumn('string', 'Address');
        data.addColumn('string', 'surname');
        data.addColumn('string', 'firstname');
        data.addColumn('string', 'link');
        data.addRow([expos[0][0],expos[0][1]," "," ",expos[0][4]+" ",expos[0][2]+"", expos[0][3]+"",""]);
        for (var j=1 ; j<expos.length ; j++){ 
        	data.addRow([expos[j][0],expos[j][1],expos[j][2]+" ",expos[j][3]+"", expos[j][4]+""," ", "",expos[j][5]]);
        }

        var dataView = new google.visualization.DataView(data);
        dataView.setColumns([0,1,7]);
      	 map = new google.visualization.Map(document.getElementById('map'));
      	map.draw(dataView, {showTip: true});
      	dataView.hideRows([0]);
      	dataView.setColumns([2,3,4]);
      	var table = new google.visualization.Table(document.getElementById('table_expo'));
      	table.draw(dataView, {showRowNumber: true});
      	dataView = new google.visualization.DataView(data);
      	dataView.setRows([0]);
      	dataView.setColumns([5,6,4]);
      	var table_usr = new google.visualization.Table(document.getElementById('table_user'));
      	table_usr.draw(dataView, {showRowNumber: true});

      	google.visualization.events.addListener(table, 'select', function() {
            map.setSelection(table.getSelection());
          });
google.visualization.events.addListener(map, 'select', function() {
            table.setSelection(map.getSelection());
            
          });
	google.visualization.events.addListener(table_usr, 'select', function() {
        map.setSelection(table_usr.getSelection());
      });
}
</script>
<script>
/*Les expos*/
<?php foreach($query_address_expo->result() as $row){?>
		<?php $adresse_concatenee=$row->address." ".$row->place." ".$row->zip_code." ".$row->city;?>
		<?php $page = "/visit/expo/".$row->expo_id;?>
		codeAddress('<?php echo $adresse_concatenee;?>','<?php echo $row->title;?>','<?php echo $row->description;?>','<?php echo anchor($page,$row->title);?>');		  
<?php } ?>


//codeAddress('46 rue barrault 75013 Paris','Chiens de race');
//codeAddress('Paris,FR','Hello');
</script>

<h2>Search an Expo on the map or in the liste</h2>
<div id='top'>
	    <div id="map_div" class = 'top'><h4>The map:</h4><div id="map"></div></div>
	    <div id='table_exp'  class='top' ><h4>The Expos:</h4><div id='table_expo'></div></div>
	    <div id='table_usr'  class='top' ><h4>Your position:</h4><div id='table_user'></div></div>

<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div> 

		</div> 
	</div>
        